<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类似下雨的特效动画</title>
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        background: url(img/70479671_p0.jpg);
        
    }
    
</style>

<body>
 
    <script>
        setInterval(function () {
            //创建rain元素
            var rain = document.createElement("div");

            //初始化rain属性
            rain.style.position = "fixed";
            rain.style.width = "10px";//设置雪花图片rain的宽
            rain.style.height = "10px";//设置雪花图片rain的高
            rain.style.background = "url(img/rain.png)";//引入雪花图片rain.png
            rain.style.filter = "blur(1px)";//过滤
            rain.style.top = "0px";
            rain.style.left = Math.random() * 1920 + "px";//随机化位置
            rain.style.opacity = parseInt(Math.random() * 10) / 10 + "";//随机化透明度

            document.body.appendChild(rain);
            setInterval(function () {
                var height = parseInt(rain.style.top);
                var k = 1;
                k++;

                rain.style.top = height + 5 * Math.pow(k, 2) + "px"; //模拟重力加速度

                //当雪花到达底部后消失并清除子节点rain
                if (rain.style.top >= "900px") {
                    clearInterval(timer);
                    rain.parentNode.removeChild(rain);
                    // 这里判断当雪花rain到达高度900px的距离后将会消失
                }
            }, 4)//每隔4毫秒雪花下落一次

        },12)//每隔12毫秒生成一次雪花

    </script>
</body>

</html>